import MeetingHeader from '@/components/MeetingHeader'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import useInit from '@/hooks/useInit'
import { Tab } from '@kedacom/react-next'
import React, { useEffect, useState } from 'react'
import BasicConfig from './BasicConfig'
import { StyledWrap } from './style'
import TVWallConfig from './tvWallConfig'
import TVWallContainer from './tvWallConfig/context'
import VirtualRoomConfig from './virtualRoomConfig'
import { t } from 'i18next'
import { useGlobalStore } from '@/store/global'
import { checkPermission } from '@/utils'

export default function App() {
	const [tabIndex, setTabIndex] = useState(0)
	const [tabData, setTabData] = useState([
		{ label: t('基本配置'), value: 1, hidden: true },
		{ label: t('电视墙配置'), value: 2, hidden: true },
		{ label: t('虚拟会议室配置'), value: 3, hidden: true },
	])
	useInit()

	const SWITCH = useGlobalStore((state) => state.SWITCH)

	useEffect(() => {
		const showBasicConfig = checkPermission('100', SWITCH.systemConfigTab)
		const showTVWallConfig = checkPermission('010', SWITCH.systemConfigTab) && SWITCH.tvwall
		const showVirtualRoomConfig = checkPermission('001', SWITCH.systemConfigTab)

		if (showBasicConfig) {
			setTabIndex(1)
		} else if (showTVWallConfig) {
			setTabIndex(2)
		} else if (showVirtualRoomConfig) {
			setTabIndex(3)
		}
		setTabData([
			{ label: t('基本配置'), value: 1, hidden: !showBasicConfig },
			{ label: t('电视墙配置'), value: 2, hidden: !showTVWallConfig },
			{ label: t('虚拟会议室配置'), value: 3, hidden: !showVirtualRoomConfig },
		])
	}, [SWITCH])

	return (
		<>
			<WebRecommendBrowser />
			<MeetingHeader tabIndex={8} />
			<StyledWrap>
				<Tab
					type="button"
					data={tabData.filter((item) => !item.hidden)}
					value={tabIndex}
					onChange={(e, v) => setTabIndex(v)}
				/>
				{tabIndex === 1 && <BasicConfig />}
				{tabIndex === 2 && (
					<TVWallContainer.Provider>
						<TVWallConfig />
					</TVWallContainer.Provider>
				)}
				{tabIndex === 3 && <VirtualRoomConfig />}
			</StyledWrap>
		</>
	)
}
